<template>
  <div>
      <slot/>
      <Zi @send="fufun"/>
      <p>{{text}}</p>
      <button @click="fun('Zia')">点我去a</button>
      <button @click="fun('Zib')">点我去b</button>
      <button @click="fun('Zic')">点我去c</button>
      <component :is="go"></component>
      <Ziaa/>
      <Zibb/>
  </div>
</template>

<script>
import Zi from './zi.vue'
import Zia from './zia.vue'
import Zib from './zib.vue'
import Zic from './zic.vue'

import Ziaa from './ziaa.vue'
import Zibb from './zibb.vue'

export default {
    components:{
        Zi,Zia,Zib,Zic,Ziaa,Zibb
    },
    methods:{
        fufun(data){
           this.text=data
        },
        fun(data){
            this.go=data
        }
    },
    data(){
        return{
            text:'',
            go:'Zia'
        }
    }
}
</script>

<style scoped>
h1{
    font-size:0.2rem
}
p{
    font-size:0.18rem
}
button{
    font-size:0.18rem
}
</style>